import React from 'react';
import { Button, Checkbox, Form, Input,message as Massage } from 'antd';
import style from "./index.module.scss"
import Link from 'next/link';
import { useRouter } from 'next/dist/client/router';
import { useDispatch } from 'react-redux';
import { setlogin } from '@/store/login';



const Sign: React.FC = () => {
  let router = useRouter()
  let dispatch = useDispatch()

  const onFinish = async (values: any) => {
    console.log('Success:', values);
    if(values.password !== values.ispassword){
        return Massage.warning("两次密码不一致")
    }
    let obj = {
      username:values.username,
      password:values.password
    }

    let res = await dispatch(setlogin(obj) as any)
    console.log(res,"sign")
    if(res.payload){
      Massage.success("注册成功，跳转到登录页")
      setTimeout(() => {
          router.push("/login")
      }, 2000);
    }else{
      Massage.warning("注册失败")
    }
  };
  
  const onFinishFailed = (errorInfo: any) => {
    console.log('Failed:', errorInfo);
     //输入框为空时提示消息
     errorInfo.errorFields.map((item:any)=>{
      Massage.warning(item.errors)
    })  
  };
  return  (
    <div className={style.login_box}>
      <div className={style.mark}>
        <Form
          name="basic"
          labelCol={{ span: 7 }}
          wrapperCol={{ span: 16 }}
          style={{ maxWidth: 600 }}
          initialValues={{ remember: true }}
          onFinish={onFinish}
          onFinishFailed={onFinishFailed}
          autoComplete="off"
        > 
          <Form.Item>
            <span className={style.login_title}>注册</span>
          </Form.Item>
          <Form.Item
            label="账号"
            name="username"
            rules={[{ required: true, message: '请输入数字、字母、下划线',pattern:(/\w{1}/) }]}
          >
            <Input />
          </Form.Item>
  
          <Form.Item
            label="密码"
            name="password"
            rules={[{ required: true, message: '只能是数字，最少六位' ,pattern:(/\d{6}/)}]}
          >
            <Input.Password  autoComplete='off' />
          </Form.Item>
  
          <Form.Item
            label="确认密码"
            name="ispassword"
            rules={[{ message: '请再次输入你的密码，只能是数字，最少六位' ,pattern:(/\d{6}/)}]}
          >
            <Input.Password  autoComplete='off' />
          </Form.Item>
          <Form.Item wrapperCol={{ offset: 4, span: 18 }}>
            <div className={style.loginbtn}>
            <Button type="primary" block  htmlType="submit">
              注册
            </Button>
            <Button type="link">
             <Link href="/login">去登录</Link>
            </Button>
            </div>
          </Form.Item>
        </Form>
      </div>
    </div>
  );
}

export default Sign;